<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="/WEB-INF/tld/fns.tld" prefix="fns" %>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <jsp:include page="/resources/inc/head.jsp"/>
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/demo.css" rel="stylesheet"/>
    <link href="${basePath}/resources/zheng-admin/plugins/zTree_v3/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <style>
        .td-file {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 250px;
        }
    </style>
</head>
<body>

<form class="layui-form layui-form-pane" id="_form">
    <div class="layui-form-item">
        <label class="layui-form-label">通知标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入通知标题"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">通知类型</label>
        <div class="layui-input-block">
            <select class="form-control" name="type" lay-verify="required">
                <option value="">请选择</option>
                <c:forEach items="${fns:getDictList('notice_type')}" var="type">
                    <option value="${type.value}">${type.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">通知用户</label>
        <div class="layui-input-block">
            <input type="text" readonly="readonly" ztreeId="organizationTree" lay-verify="required"
                   placeholder="请选择通知用户" class="layui-input" onclick="ZtreeCommon.pageShowMenu(this)">
            <input type="hidden" id="userIds" name="noticeUserIds" ztreeId="organizationTree">
            <div class="menuContent" style="display:none; position: absolute;z-index: 10000">
                <ul id="organizationTree" class="ztree" style="margin-top:0; width:220px;"></ul>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">通知详情</label>
        <div class="layui-input-block">
            <textarea name="content" autocomplete="off" placeholder="请输入通知详情" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
            <textarea name="remark" autocomplete="off" placeholder="请输入备注" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">附件</label>
        <div class="layui-input-inline">
            <table class="layui-table" style="margin-top: 0;width: 500px">
                <thead>
                <tr>
                    <th style="max-width: 200px">文件名称</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tbody">
                </tbody>
            </table>
            <div id="picker">上传文件</div>
        </div>
    </div>
    <%--todo 上传组件--%>
    <div class="layui-form-item">
        <div class="layui-input-block" style="float: right">
            <button class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
        </div>
    </div>
</form>
<jsp:include page="/resources/inc/pageFooter.jsp"/>
<script src="${basePath}/resources/zheng-admin/js/my-ztree-common.js"></script>
<script src="${basePath}/resources/zheng-admin/js/upload-common.js"></script>
<script>
    var organizationNodes = getOrganizationTree(false, true);
    var load;//上传load

    $(function () {
        var organizationTree = $.fn.zTree.init($("#organizationTree"), ZtreeCommon.checkBoxSetting, organizationNodes);
        //提交方法
        FormCommon.initForm({
            url: "${basePath}/oa/wc/notice/create",
            subContentType: "json",
            editData: function (data) {
                data.noticeUserIds = data.noticeUserIds.split(",");
                var trs = $("#tbody").find("tr");
                var files = [];
                trs.each(function (index, tr) {
                    var path = $(tr).attr("path");
                    var fileName = $(tr).attr("fileName");
                    files.push({path:path,fileName:fileName});
                });
                data.files = JSON.stringify(files);
                return data;
            }
        });
        var commonUpload = new CommonUpload("http://127.0.0.1:7771/fastdfs/fileUpload");
        commonUpload.setUploadStart(uploadStart);
        commonUpload.setUploadSuccess(uploadSuccess);
        commonUpload.init();
    });
    function uploadStart() {
        load = layer.load(1);
    }
    function uploadSuccess(file, response) {
        layer.close(load);
        if (response.code == 1) {
            var data = response.data;
            var path = data.fileAbsolutePath;
            $("#tbody").append("<tr path='" + path + "' fileName='" + file.name + "'><td title='" + file.name + "' class='td-file'>" + file.name + "</td>" +
                    "<td><a onclick='removeFile(this)'>删除</a></td></tr>")
            layer.msg('上传成功！！', {
                icon: 1,
                time: 1000 //2秒关闭（如果不配置，默认是3秒）
            }, function () {

            });
        } else {
            layer.msg("上传失败！" + response.data, {icon: 5});
        }
    }
    function removeFile(tag) {
        $(tag).parents("tr").remove();
    }
</script>
</body>
</html>
